<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-06-03 13:47:54
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-11-12 10:50:00
-->
<template>
  <div class="unRealName">
    <div class="unRealNameSearch">
      <el-row
        class="toolbar searchInputWidth"
        style="padding-bottom: 0"
        v-if="easyModel"
      >
        <el-form :inline="true" :model="filterField">
          <el-form-item label="区域">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="行业">
            <el-select
              placeholder="请选择"
              clearable
              v-model="filterField.industryId"
            >
              <el-option
                v-for="item in industryOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目状态">
            <el-select
              placeholder="请选择"
              clearable
              v-model="filterField.status"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投资类型">
            <el-select
              placeholder="请选择"
              clearable
              v-model="filterField.investment"
              v-if="activeName != 10"
            >
              <el-option
                v-for="item in investmentOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              clearable
              v-model="filterField.investment"
              v-if="activeName == 10"
            >
              <el-option
                v-for="item in investmentOptionsCz"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="建档日期">
            <el-date-picker
              v-model="date"
              type="daterange"
              :picker-options="pickerOptions"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="开工日期">
            <el-date-picker
              v-model="startDate"
              type="daterange"
              :picker-options="pickerOptions"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              v-sdc
              @click="searchList"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <div class="unRealNameMain">
      <div class="header">
        <span v-if="activeName == 1" class="headerTips">
          项目录入的实名制总人数低于
          {{ days1 }} ，统计包括各类型人员；需监督项目落实录入
        </span>
        <span v-if="activeName == 3" class="headerTips"
          >统计的是系统内专户账号为空的项目明细，要求施工方开设项目专户，已开设专户需要企业在系统录入专户信息</span
        >
        <span v-if="activeName == 4" class="headerTips"
          >项目已开设专户，但未缴存资金，需督促建设方缴存资金</span
        >
        <span v-if="activeName == 10" class="headerTips"
          >无资金拨付的财政项目，需要财政部门进行资金拨付处理</span
        >
        <div class="headerBox">
          <colSetup
            :datas="lists"
            :more="true"
            @getSelectMenuId="getSelectMenuId"
            style="display: inline-block"
            :activeName="activeName"
          />
          <!-- <el-button type="primary" class="funComBut saveBtn"  icon="icon iconfont icondaochu" @click="toExportExcel"> -->
          <el-button
            type="primary"
            class="funComBut saveBtn"
            icon="icon iconfont icondaochu"
            @click="exportE"
          >
            导出报表
          </el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        v-loading="loading"
        border=""
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
        ref="table"
      >
        <el-table-column
          :prop="item.name"
          :label="item.label"
          align="left"
          :formatter="formatTd"
          v-for="item in filterList"
          :key="item.id"
          default-expand-all
          :fixed="item.fixed"
          min-width="160"
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
    <exportExcel
      :showExcel="showExcel"
      :excelTitle="list.label"
      :colmnList="list.children"
      :activeName="activeName"
      @closeExcel="closeExcel"
      @getExportList="getExportList"
    ></exportExcel>
  </div>
</template>
<script>
// import exportExcel from "@/components/publicCom/exportExcel1";
import exportExcel from '@/components/publicCom/exportExcelSingle'

import colSetup from '@/components/publicCom/colSetupMore'
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'unRealNameOld',
  components: {
    exportExcel,
    colSetup,
  },
  props: {
    list: {
      type: Object,
    },
    activeName: {
      type: Number,
    },
    areaId: {
      type: String,
    },
    industryId: {
      type: String,
    },
    status: {
      type: String,
    },
    investment: {
      type: String,
    },
  },
  created() {
    // this.filterField.name = this.$route.query.employeeName;
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  data() {
    return {
      tableHeight: null,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        },
      },
      days1: 4,
      days: 4,
      date: [],
      showExcel: false,
      activeNames: this.activeName,
      excelTitle: this.list.label,
      lists: this.list.children,
      paramsList: [],
      areaId: '', //区域
      tableList: [],
      requestUrl: 'api-s/cs/statsprojectimprove/findPageByType',
      easyModel: true,
      filterField: {
        type: '01',
        projectName: '',
        areaId: '',
        industryId: this.industryId ? this.industryId : '',
        status: this.status ? this.status : '',
        investment: this.investment ? this.investment : '',
        archiveStartDate: '',
        archiveEndDate: '',
        projectStartDate: '',
        projectEndDate: '',
      },
      loading: false,
      startDate: '',
      investmentOptions: [],
      investmentOptionsCz: [
        {
          id: 'GOV',
          name: '政府投资',
        },
      ],
    }
  },

  watch: {
    areaId: {
      handler(val, old) {
        if (typeof val == 'string') {
          this.filterField.areaId = val
        }
      },
      deep: true,
      immediate: true,
    },
    list: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      deep: true,
    },
    industryId(val) {
      this.filterField.industryId = val
    },
    status(val) {
      this.filterField.status = val
    },
    investment(val) {
      this.filterField.investment = val
    },
    activeName(val, oldVal) {
      this.lists = this.list.children
      if (val <= 9) {
        this.filterField.type = val == 0 ? '' : '0' + val
      } else {
        this.filterField.type = val == 0 ? '' : val
      }
      // this.filterField.type = "0" + val;
      if (oldVal > 0) {
        //切换tab 搜索栏清空
        this.filterField.industryId = ''
        //   this.filterField.status = '';
        this.filterField.investment = ''
        this.filterField.projectName = ''
        this.filterField.archiveStartDate = ''
        this.filterField.archiveEndDate = ''
        this.date = ''
        this.startDate = ''
        this.filterField.projectStartDate = ''
        this.filterField.projectEndDate = ''
      }
      this.$refs.pagination.getTableListData()
      if (val == 1) {
        this.getSetting('employee_total')
      }
    },
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
    filterList: function () {
      this.lists.forEach((v) => {
        // v.name==="areaName"||v.name==="industryName"||v.name==="investmentDesc"||
        if (v.name === 'projectName') {
          v.fixed = true
        }
      })
      return this.lists.filter((item) => {
        return item.isShow
      })
    },
    setColList: function () {
      let arr = []
      if (this.lists.length == 17) {
        arr = [
          {
            id: 'areaName1',
            label: '项目基本信息',
            isDefault: true,
            isShow: true,
            disabled: true,
            name: 'areaName',
            children: [],
          },
          {
            id: 'areaName2',
            label: '联系方式',
            isDefault: true,
            isShow: true,
            disabled: true,
            name: 'areaName2',
            children: [],
          },
          {
            id: 'areaName3',
            label: '项目数据统计',
            isDefault: true,
            isShow: true,
            disabled: true,
            name: 'areaName3',
            children: [],
          },
        ]
        this.lists.forEach((item, index) => {
          if (index == 4) {
            arr[2].children.push(item)
          } else {
            if (index < 14) {
              arr[0].children.push(item)
            } else {
              arr[1].children.push(item)
            }
          }
        })
      } else {
        arr = [
          {
            id: 'areaName1',
            label: '项目基本信息',
            isDefault: true,
            isShow: true,
            disabled: true,
            name: 'areaName',
            children: [],
          },
          {
            id: 'areaName2',
            label: '联系方式',
            isDefault: true,
            isShow: true,
            disabled: true,
            name: 'areaName2',
            children: [],
          },
        ]
        this.lists.forEach((item, index) => {
          if (index < 12) {
            arr[0].children.push(item)
          } else {
            arr[1].children.push(item)
          }
        })
      }
      return arr
    },
  },
  methods: {
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    /**
     * @name: 获取之前设置的值
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    getSetting(name) {
      this.axios({
        method: 'post',
        data: { name },
        url: 'api-s/cs/statsparamconfig/findParamByName',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.days = response.data.result
              this.days1 = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @name: 打开导出弹窗
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */

    toExportExcel() {
      this.showExcel = true
    },
    /**
     * @name: 初始化table数据
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      if (this.date) {
        this.filterField.archiveStartDate = this.date[0] ? this.date[0] : ''
        this.filterField.archiveEndDate = this.date[1] ? this.date[1] : ''
      } else {
        this.filterField.archiveStartDate = ''
        this.filterField.archiveEndDate = ''
      }
      if (this.startDate) {
        this.filterField.projectStartDate = this.startDate[0]
          ? this.startDate[0]
          : ''
        this.filterField.projectEndDate = this.startDate[1]
          ? this.startDate[1]
          : ''
      } else {
        this.filterField.projectStartDate = ''
        this.filterField.projectEndDate = ''
      }
      this.$refs.pagination.getTableListData()
    },
    /**
     * @name: 关闭导出
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    closeExcel(val) {
      this.showExcel = false
    },
    /**
     * @name: 获取导出字段
     * @param {array}
     * @Author: luoyong/471826078@qq.com
     */
    getExportList(val) {
      const exportArr = val
      let str = []
      exportArr.forEach((item) => {
        if (item.isDefault) {
          str.push(item.name)
        }
      })
      if (str.length) {
        let activeNames
        if (this.activeName <= 9) {
          activeNames = this.activeName == 0 ? '' : '0' + this.activeName
        } else {
          activeNames = this.activeName == 0 ? '' : this.activeName
        }
        // const activeNames = "0" + this.activeName;
        window.location.href =
          common.commonApi +
          `api-s/cs/statsprojectimprove/exportProjectImprove?type=${activeNames}&` +
          'exportType=PROJECT_IMPROVE&' +
          'field=' +
          str.join(',') +
          '&projectName=' +
          this.filterField.projectName +
          '&areaId=' +
          this.filterField.areaId +
          '&industryId=' +
          this.filterField.industryId +
          '&status=' +
          this.filterField.status +
          '&investment=' +
          this.filterField.investment +
          '&archiveStartDate=' +
          this.filterField.archiveStartDate +
          '&archiveEndDate=' +
          this.filterField.archiveEndDate +
          '&projectStartDate=' +
          this.filterField.projectStartDate +
          '&projectEndDate=' +
          this.filterField.projectEndDate +
          '&access_token=' +
          localStorage.getItem('access_token')
        this.$emit('setList', { list: val, activeName: this.activeName }) //传值给父级，保存设置
      } else {
        this.$message({
          type: 'warnging',
          message: '导出字段为空',
        })
      }
      this.showExcel = false
    },
    /**
     * @name: 返回显示列数据
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    getSelectMenuId(val) {
      let arrs = JSON.parse(JSON.stringify(this.lists))
      arrs.forEach((item) => {
        val.forEach((items) => {
          items.children.forEach((m) => {
            if (m.id == item.id) {
              item.isShow = m.isShow
            }
          })
        })
      })
    },
    /**
     * @name: 选择区域
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    // 直接导出报表
    exportE() {
      let str = []
      this.filterList.forEach((item) => {
        if (item.isDefault) {
          str.push(item.name)
        }
      })
      if (str.length) {
        // const activeNames = "0" + this.activeName;
        let activeNames
        if (this.activeName <= 9) {
          activeNames = this.activeName == 0 ? '' : '0' + this.activeName
        } else {
          activeNames = this.activeName == 0 ? '' : this.activeName
        }
        window.location.href =
          common.commonApi +
          `api-s/cs/statsprojectimprove/exportProjectImprove?type=${activeNames}&` +
          'exportType=PROJECT_IMPROVE&' +
          'field=' +
          str.join(',') +
          '&projectName=' +
          this.filterField.projectName +
          '&areaId=' +
          this.filterField.areaId +
          '&industryId=' +
          this.filterField.industryId +
          '&status=' +
          this.filterField.status +
          '&investment=' +
          this.filterField.investment +
          '&archiveStartDate=' +
          this.filterField.archiveStartDate +
          '&archiveEndDate=' +
          this.filterField.archiveEndDate +
          '&projectStartDate=' +
          this.filterField.projectStartDate +
          '&projectEndDate=' +
          this.filterField.projectEndDate +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'warnging',
          message: '导出字段为空',
        })
      }
    },
  },
  mounted() {
    if (this.activeName <= 9) {
      this.filterField.type = this.activeName == 0 ? '' : '0' + this.activeName
    } else {
      this.filterField.type = this.activeName == 0 ? '' : this.activeName
    }
    // this.filterField.type = "0" + this.activeName;
    this.loading = true
    this.getInvestmenttype({})
    this.getStatus({})
    this.getIndustry({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    if (this.activeName == 1) {
      this.getSetting('employee_total')
    }
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 230
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 230
      }
    })
  },
}
</script>
<style lang="less" scoped>
.unRealNameSearch {
  border-bottom: 10px solid #f5f7fa;
}
.baseSearch {
  position: relative;
  padding-left: 102px;
  &Title {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 96px;
    text-align: right;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #333333;
  }
  &Item {
    margin-left: 17px;
    margin-bottom: 24px;
  }
}
.moreSearch {
  position: relative;
  padding-left: 119px;
  //   min-height: 36px;

  &Title {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    line-height: 36px;
    width: 96px;
    text-align: right;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #333333;
  }
  &List {
    margin-bottom: 24px;
    &Left {
      display: inline-block;
    }
    &Right {
      display: inline-block;
      margin-left: 17px;
      width: 230px;
      .el-input {
        width: 100%;
      }
    }
  }
}
.actionBox {
  position: relative;
  padding-left: 119px;
  margin-bottom: 24px;
  &Add {
    line-height: 34px;
    border-radius: 18px;
    width: 76px;
    border-color: #009588;
    color: #009588;
    padding: 0;
  }
  &Search {
    position: absolute;
    top: 0;
    right: 17px;
  }
}
.unRealNameMain {
  padding: 24px;
  .header {
    padding-bottom: 24px;
    min-height: 60px;
    text-align: left;
    line-height: 36px;
    position: relative;
    &Tips {
      display: block;
      width: calc(100% - 240px);
      font-size: 14px;
      color: #333333;
    }
    &Box {
      position: absolute;
      right: 0;
      top: 0;
      height: 36px;
    }
    .el-button {
      line-height: 36px;
      height: 36px;
      // vertical-align: middle;
      img {
        vertical-align: sub;
      }
    }
  }
}
</style>
